<template>
  <component
    :is="currCompName"
    ref="key-board-box"
    v-show="show"
    :show="show"
    :getInputInfo="getInputInfo"
    :getKeyBoardInfo="getKeyBoardInfo"
    :rotate="rotate"
    v-bind="childProps"
    @submit="submitHandler"
    @show="showHandler"
    @delete="deleteHandler"
    @append="appendHandler"
  />
</template>
<script>
import defaultKeyBoard from "./components/defaultKeyBoard/index";
import numberKeyBoard from "./components/numberKeyBoard/index";
import keyBoardComps from "./keyBoardComps";
import EventKeys from "@enu/eventKeys.js";
import { setCurrKeyBoard, getActiveInput } from "@devass/js/blur.js";
import "@devass/font/iconfont.scss";
export default {
  name: "keyBoardEntryComponent",
  components: { defaultKeyBoard, numberKeyBoard },
  props: {
    compName: {
      validator: function (value) {
        return value == undefined || keyBoardComps.indexOf(value) !== -1;
      },
      default: () => {
        return keyBoardComps[0];
      },
    },
    keyBoardMaps: {
      default: () => {
        return {};
      },
    },
    rotate: {
      validator: function (value) {
        return [0, 90, -90].indexOf(value) !== -1;
      },
      default: () => 0,
    },
  },
  computed: {
    currCompName() {
      return this.getKeyBoardInfo && this.getKeyBoardInfo.compName
        ? this.getKeyBoardInfo.compName
        : this.compName;
    },
    childProps() {
      //子组件的props
      let { compName, ...otherProps } = this.getKeyBoardInfo;
      return otherProps;
    },
  },
  data() {
    return {
      show: false,
      getInputInfo: {}, //接受【全局事件提供的】输入框信息
      getKeyBoardInfo: {}, //接收【全局事件提供的】键盘信息
    };
  },
  created() {
    this.addEventListener();
  },
  beforeDestroy() {
    this.removeEventListener();
  },
  methods: {
    addEventListener() {
      this.$root.$on(
        EventKeys["vue-keyboard-cn-focus"],
        this.focusEventHandler
      );
    },
    removeEventListener() {
      this.$root.$off(
        EventKeys["vue-keyboard-cn-focus"],
        this.focusEventHandler
      );
    },
    focusEventHandler(data) {
      console.log("keyboard: 接受input参数", data);
      this.getInputInfo = data.inputProps ? data.inputProps : {};
      this.getKeyBoardInfo = data.keyBoardProps ? data.keyBoardProps : {};
      this.show = true;

      this.$nextTick(() => {
        console.log("keyboard:ref ", this, "show", this.show);
        this.$children[0].focusHandler(data); //不做校验，所有子组件都必须实现
      });
    },
    setActiveInputBlur(eventName) {
      let activeInput = getActiveInput();
      //不管它是否处于获取焦点状态，只负责让它失去焦点
      if (activeInput.vm) {
        activeInput.vm.mixins_triggerFocus(false, eventName);
      }
    },
    showHandler(bool) {
      console.log("keyboard:showHandler", bool);
      if (!bool) {
        this.setActiveInputBlur("blur");
      }
      this.$emit("show", bool);
      //这里的showed事件必须由子组件通知触发，只有子组件完成了渲染后推送全局事件
      //通知所有组件
      this.$root.$emit(EventKeys["vue-keyboard-cn-showed"], {
        show: bool,
        el: this.$children[0].$el,
      });
      console.log("keyboard:showHandler????", bool);
      //注意代码顺序
      //必须通知了后再触发失去焦点
      this.show = bool;
    },
    deleteHandler() {
      console.log("keyboard:deleteHandler");
      this.$root.$emit(EventKeys["vue-keyboard-cn-append-delete"]);
    },
    appendHandler(item) {
      console.log("keyboard:appendHandler", item);
      this.$root.$emit(EventKeys["vue-keyboard-cn-append-item"], item);
    },
    submitHandler() {
      //这里需要调用当前激活input的submit事件
      this.setActiveInputBlur("submit");
    },
  },
};
</script>
